<template>
	<view class="cars">
		<view v-if="carList.length == 0" class="no-car">
			<image class="no-card-img" src="../../static/images/no_car_list.png" alt="no-card-img"></image>
			<text class="title">您还没有绑定车牌</text>
			<view class="searchBtn">
				<button class="btn" @click="toAddCar">立即绑定</button>
			</view>
		</view>
		<view v-else>
			<view class="new-car-list">
				<view v-for="item in carList" @click="backToElectric">
					<view class="new-car-item">
						<view class="carLisence">{{ item.carLicense }}</view>
						<view class="btn-unbind" @click="unbindCar(item)">解绑</view>
					</view>
				</view>
			</view>
			<view class="searchBtn">
				<button class="btn" @click="toAddCar">添加车牌</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCar,
		delMyCar
	} from "@/api/api"
	export default {
		data() {
			return {
				carList: []
			}
		},
		onLoad() {
			this.getCarListFun()
		},
		methods: {
			async getCarListFun() {
				const result = await getMyCar({
					openId: 'o-z5d5PEJnmaTim1CA6ezbBcVYVM'
				})
				this.carList = result.data
			},
			toAddCar() {
				// 跳转至绑定车牌页面：
				uni.navigateTo({
					url: "/pages/bindCar/bindCar"
				})
			},
			async unbindCar(item) {
				const result = await delMyCar({
					carId: item.carId
				});
				if (result.code == 200) {
					uni.showToast({
						title: "解绑成功~",
						icon: "none",
					});
					this.getCarListFun()
					return
				}
				uni.showToast({
					title: result.msg,
					icon: "none",
				});

			}
		}
	}
</script>

<style lang="less">
	.cars .no-car {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.no-card-img {
		margin-top: 174rpx;
		width: 602rpx;
		height: 256rpx;
	}

	.cars .no-car .title {
		height: 34rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #989DAA;
		line-height: 34rpx;
		margin: 44rpx 0 84rpx 0;
	}

	.searchBtn {
		position: relative;
		width: 100%;
		display: flex;
		margin-bottom: 82rpx;
		justify-content: center;
		align-items: center;
	}

	.searchBtn .btn {
		width: 600rpx;
		height: 100rpx;
		background: #2D4FA2;
		border-radius: 52rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new-car-list {
		padding: 30rpx;
	}

	.new-car-item {
		border-radius: 28rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 50rpx 40rpx;
		justify-content: space-between;
		background: url(../../static/images/my_car_bg@2x.png) no-repeat;
		background-size: cover;
	}

	.carLisence {
		font-size: 48rpx;
	}

	.btn-unbind {
		color: #09244B;
		font-size: 32rpx;
	}
</style>
